<template>
	<view class="main full-page" :class="devicesModal? 'prevents':''" style="display: flex;flex-direction: column;">
		<view class="swiper radius margin" style="margin-bottom: -10rpx" >
<!--			<uni-swiper-dot  class="uni-swiper-dot-box" :info="bannerList" :current="swiperDotIndex"-->
<!--											 :mode="mode" field="content">-->
				<swiper autoplay="true" class="swiper-box" @change="swiperChange" :current="swiperDotIndex">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<view class="swiper-item" :class="'swiper-item' + index">
							<image :lazy-load="true" class="swiper-item-image radius"  @click="toPath(item)" :src="item.icon" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
<!--			</uni-swiper-dot>-->
		</view>
		<!-- 商品分类 -->
		<view v-if="list.length" class="bg-white margin radius borders"  style="margin-bottom: 5rpx;overflow: hidden">
			<view class="title-text" style="width:100%">服务推荐</view>
			<view class="grid text-center col-4 padding-tb">
				<view class="content margin-bottom-xs" v-for="(item,index) in list" :key="index" @tap="jumpClick(item)" :data-code="pointList[index].code" :data-eventName="pointList[index].dataEvent">
					<view class="" >
						<image :src="`https://statics.xmcsrv.net/weixin/cloud/groups/${item.icon}.png`" style="width:2.5em;height:2.3em" mode="aspectFit"></image>
					</view>
					<view class="text-sm text-black">{{item.text}}</view>
				</view>
			</view>
		</view>
		<!-- 我的设备-->
		<view class="bg-white margin radius borders " style="margin-bottom: 5rpx;overflow: hidden" @tap="">
			<view class="title-text margin-bottom" style="width:100%">我的设备</view>
			<view class="more" @tap="clickMoreDevices">
				更多 </view>
			<view style="height: 15rpx"></view>
			<view class="cu-list menu card-menu" :class="index == 0? 'solids-bottom ':'second-line-device'" style="margin-right: auto; margin-left:auto;width: 98%" v-for="(item,index) in devicesList_2" :key="index" @tap="jumpToIntroduceDetail(item)">
				<view class="cu-item bg-white arrow" @tap="">
					<view class="content line-limit-one">
						<image :src="item.devicePic ? item.devicePic :`https://statics.xmcsrv.net/weixin/cloud/device/type/${item.devState ? item.icon+'-1' :item.icon }.svg`" style="padding:3px;width:78upx;" mode="widthFix"></image>
						<text class="text-df text-black">{{item.devName}}</text>
					</view>
				</view>
			</view>
		</view>
		<j-modal  @mask="clickMoreDevices" :value="devicesModal" :showCancel="true" @cancel="clickMoreDevices" :showConfirm="false" >
			<view slot="title" style="font-weight:700;display: flex; align-items: center;justify-content: center">
				<view>我的设备</view>
			</view>
			<view slot="content" style="text-align: left">
					<view class="cu-list menu card-menu" style="margin-right: auto; margin-left:auto;width: 98%" v-for="(item,index) in devicesList" :key="index" @tap="jumpToIntroduceDetail(item)">
						<view class="cu-item bg-gray " >
							<view class="content line-limit-one">
								<image :src="item.devicePic ? item.devicePic :`https://statics.xmcsrv.net/weixin/cloud/device/type/${item.devState ? item.icon+'-1' :item.icon }.svg`" style="padding:3px;width:100upx;" mode="widthFix"></image>
								<text class="text-lg text-black">{{item.devName}}</text>
							</view>
						</view>
					</view>
			</view>
		</j-modal>
		<!-- 算法超市-->
		<view v-if="false" class="bg-white margin radius borders " style="margin-bottom: 5rpx;overflow: hidden" @tap="">
			<view class="title-text margin-bottom" style="width:100%">算法推荐</view>
			<view style="height: 25rpx"></view>
			<view class="cu-list menu card-menu" :class="index == 0? 'solids-bottom ':'second-line-device'" style="margin-right: auto; margin-left:auto;width: 98%" v-for="(item,index) in algorithmRecommendationList" :key="index" @tap="jumpToAlgorithmDetail(item)">
				<view class="cu-item bg-white arrow ar-item" @tap="">
					<view class="content line-limit-one ar-box">
						<image :src="item.icon" style="padding:3px;width:108upx;" mode="widthFix"></image>
						<view class="ar-text">
								<text class="text-df text-black">{{item.name}}</text>
								<text class="text-sm">{{item.description}}</text>
							</view>
					</view>
				</view>
			</view>
		</view>
        <view class="side" @touchmove.stop="touchMove" :style="{bottom: bottom+'px'}">
            <view class="order" @tap="jumpOrder('list')">订单</view>
            <view class="coupons" @tap="jumpOrder('coupons')">优惠券</view>
        </view>
        <!-- 设备列表 -->
        <view v-if="false" class="devices-box">
            <devices ref="devicesRef" :devicesList="devicesList"></devices>
        </view>
        <view class="height-xs"></view>
        <view class="text-center" style="color:#dcd9d9;">v1.0</view>
	</view>
</template>

<script>
import getAppDevice from '@/utils/getAppDevice.js'
import devices from './devices/devices'
import logins from '@/utils/loginApi.js'
import constants from '@/utils/constants.js'
import { getBossBannerList,getBossAlgorithmRecommendation }from '@/API/api.js'
const { handleLogin } = logins(); 
const {getAppDeviceList, getShareDeviceList}=getAppDevice()
export default {
	components: {
	   devices
	},
	data() {
		return {
			swiperDotIndex:0,
			mode: 'default',
			devicesModal:false,
			bannerList:[],
			openInfo:[],
			list: [],
			pointList:[],
			isRoute:false,//是否路由重定向
			devicesList: [],
			devicesList_2:[],
			algorithmRecommendationList:[],
            bottom: 20,
            screen: null,
		}
	},
	onLoad(e) {
		const {routing} = e;
		if(routing){
			handleRoute(e);
			this.isRoute = true;
		}else{
			// handleLogin(()=>{})
			handleLogin(this.getBannerList)
			this.isRoute = false;
		}

	},
    onShow() {
		uni.showTabBar()
		this.pointList = [{
			code:'603020',
			dataEvent:'xmcCss_introduce'
		},{
			code:'603025',
			dataEvent:'xmcVoes_introduce'
		},{
			code:'603023',
			dataEvent:'pmsVoes_introduce'
		},{
			code:'603022',
			dataEvent:'pmsSms_introduce'
		},{
			code:'603021',
			dataEvent:'netCellular_introduce'
		},
		]
		this.list = [
			{icon: 'xmcCss',text: this.$t('JLink.groups.xmcCss'),classifyId: 'xmc.css'},//云存储
			{icon: 'xmcVoes',text: this.$t('JLink.groups.xmcVoes'),classifyId: 'xmc.voes'},//云电话
			{icon: 'pmsVoes',text: this.$t('JLink.groups.pmsVoes'),classifyId: 'pms.voes'},//语音报警
			{icon: 'pmsSms',text:this.$t('JLink.groups.pmsSms'),classifyId:'pms.sms'},//短信报警
			{icon: 'netCellular',text:this.$t('JLink.groups.netCellular'),classifyId:'net.cellular'},//流量
			// {icon: 'algorithmRecommendation',text:'算法超市',classifyId:'algorithmRecommendation'},//流量
		]

		getShareDeviceList((res) => {
            res.then(result => {
                let list = result
                getAppDeviceList((res)=>{
                    res.then(result1 => {
                        this.devicesList=[...list, ...result1]
                        this.getUserDeviceListByPage(this.devicesList)
                    })
                })
            })
        })

		// this.getBossAlgorithmRecommendation()
    },
    onReady() {
        uni.getSystemInfo({
            success:(res) => {
                this.screen = res
            },
        })
    },
    onHide() {
        console.log('Unload')
        this.devicesList = []
				this.devicesModal = false
    },
  methods: {
		async getUserDeviceListByPage(res) {
			const data = {
				page: 1,
				limit: 999,
			};
			return getApp().globalData.api.getUserDeviceListByPage(data, (result) => {
					result.data.forEach(item1=>{
						res.forEach(item2=>{
							if(item1.deviceNo == item2.devId){
								if(item1.devicePic){
									item2.devicePic = item1.devicePic
								}
							}
						})
					})
				console.log(res, 'return promise result')
				this.devicesList=res
				let result1 = [...this.devicesList]
				result1.splice(2)
				this.devicesList_2 = result1
				console.log('deviceList2',this.devicesList_2)
				// uni.setStorageSync('allDeviceList', result.data)
			});
		},
		// 获取算法超市
		getBossAlgorithmRecommendation(){
			let params = {
				appKey:null,
				language:'zh',
				classifyId:null
			}
			getBossAlgorithmRecommendation(params).then(res=>{
				console.log('getBossAlgorithmRecommendation====>',res.data)
				res.data[0].icon1 = 'xmcAisTimealbum'
				res.data[1].icon1 = 'xmcAisBirds'
				res.data[2].icon1 = 'xmcAisRecface'
				res.data[3].icon1 = 'xmcAisOffduty'
				this.algorithmRecommendationList = res.data
			})
		},
		getBannerList(){
			let params = {
				language:'zh'
			}
			getBossBannerList(params).then(res=>{
				const {code,data} = res
				if(code===2000){
					this.bannerList = data
					console.log('bannerList====>',this.bannerList)
				}
			})
		},
		// 轮播图事件
		swiperChange(e) {
			this.swiperDotIndex = e.detail.current
		},
		// 点击更多
		clickMoreDevices(){
			this.devicesModal = !this.devicesModal
		},
		// 轮播图跳转
		toPath(e) {
			const { jumpConfig } = e;
			let icon = 'xmcCss'
			switch(jumpConfig){
				case 'iccid':
					// this.$routing(this.$pages.iccid.index)
					break;
				default:
					this.$routing(`${this.$pages.introduce}${icon}?classifyId=${jumpConfig}`)
					break;
			}
		},
      touchMove(e) {
          this.bottom = this.screen.windowHeight - e.touches[0].clientY
          if(this.bottom<0) this.bottom = 0
          if(this.bottom>this.screen.windowHeight-this.screen.statusBarHeight*2) this.bottom = this.screen.windowHeight - this.screen.statusBarHeight*2
      },
	// 跳转到详情
	jumpClick(item){
		const { classifyId, icon } = item;
		console.log('icon',item)
		switch(item.classifyId){
		case 'iccid':
		    // this.$routing(this.$pages.iccid.index)
			break;
			case 'algorithmRecommendation':
				uni.navigateTo({
					url:`/jvss/pageCloud/algorithmSupermarket/algorithmSupermarket?algorithmRecommendationList=${encodeURIComponent(JSON.stringify(this.algorithmRecommendationList))}`
				})
				break;
		default:
			this.$routing(`${this.$pages.introduce}${icon}?classifyId=${classifyId}`)
			break;
		}
	},
	// 根据url路由参数路由重定向
	handleRoute(val){
		const {routing,classifyId} = val;
		let routingQuery = Object.assign({},val)
		if (routing) {
			switch (routing) {
				case "order":
					this.$routers.push({ path: this.$pages.order.list, query: routingQuery })//订单界面
					break;
				case "buy":
					this.$routers.push({ path: this.$pages.buyDefault, query: routingQuery })//订单购买界面
					break;
				case "orderDetail":
					this.$routers.push({ path: this.$pages.details, query: routingQuery })//订单详情
					break;
				case "coupons":
					storage.set('couponsTab',val.cardVal ? 'packageCard' : 'coupon')
					this.$routers.push({ path: this.$pages.coupons, query: routingQuery })//优惠券
					break;
				case "introduce":
					constants.GROUPTYPE().forEach(z=>{
						if(z.classifyId===classifyId){
							this.$routers.push({ path: `${this.$pages.introduce}${z.icon}`, query: routingQuery })//商品简介
							return;
						}
					})
					break;
				default:
					handleLogin(()=>{})
					break;
			}
		}
	},
    jumpOrder(name) {
      switch (name) {
        case 'list':
          this.$routing(this.$pages.order.list)
          break;
        case 'coupons':
          this.$routing(this.$pages.coupons)
          break;
        case 'paying':
          // this.$routing(this.$pages.paying)
          break;
        case 'success':
          // this.$routing(`${this.$pages.success}?classifyId=xmc.voes`)
          break;
      }
    },
		jumpToIntroduceDetail(item){
			console.log('item==>',item)
			uni.navigateTo({
				url:`/jvss/pageCloud/deviceIntroduceDetail/deviceIntroduceDetail?deviceInfo=${encodeURIComponent(JSON.stringify(item))}`
			})
		},
		jumpToAlgorithmDetail(item){
			console.log('item==>',item)
			const {icon1,classifyId} = item
			this.$routing(`${this.$pages.introduce}${icon1}?classifyId=${classifyId}`)
		}
  }
}
</script>

<style lang="less" scoped>
@import '@/common/style/main.css';
.swiper {
	position: relative;
	margin-top: 20rpx;

	/deep/.uni-swiper__warp {
		width: 100%;
		height: 300rpx;
		margin: 20rpx auto;
		border-radius: 15rpx;
	}

	/deep/.swiper-box {
		width: 100%;
		height: 260rpx;
		margin: auto;

		.swiper-item-image {
			width: 100%;
			height: 260rpx;
		}
	}

	.closeSwiper {
		position: absolute;
		top: 2rpx;
		right: 20rpx;
	}
}
.content:not(:nth-child(3n)) .bg-img {
    border-right: 2rpx solid #eaeaea;
}
.title-text{
	position:relative;
	margin: 23rpx 30rpx -20rpx;
	width: 128rpx;
	height: 45rpx;
	font-size: 32rpx;
	font-weight: 700;
	color: #333333;
	line-height: 30rpx;
}
.full-page{
	background: linear-gradient(180deg, #E2F3F3 0%, rgba(226,242,245,0) 100%);
	opacity: 1;
}
.side {
  position: fixed;
  z-index: 999;
  background-color: #41c4bf;
  font-size: 14px;
  color: #fff;
  right: 0;
  border-bottom-left-radius: 12px;
  border-top-left-radius: 12px;
  bottom: 20px;
}
.side view {
    width: 80px;
    padding: 6px 3px;
    text-align: center;
}
.side .order {
    position: relative;
}
.side .order:after {
  content: " ";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 0;
  height: 1px;
  background: #fff;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  z-index: 2;
}
.devices-box {
    width: 100vw;
    flex-grow: 1;
    overflow: hidden;
}
.second-line-device{
	margin-top: -10rpx;
}
.more{
	height: 33rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #FF0025;
	line-height: 30rpx;
	float: right;
	right: 50rpx;
	position: relative;
	top:-20rpx;
	&:before {
		position: absolute;
		top: -2rpx;
		right: -30rpx;
		bottom: 0;
		display: block;
		margin: auto;
		width: 0.9375rem;
		height: 0.9375rem;
		color: #FF0025;
		content: "\e6a3";
		text-align: center;
		font-size: .8625rem;
		font-family: cuIcon;
		line-height: 0.9375rem;
	}
}
.ar-item{
	height: 160rpx;
}
.ar-text{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.ar-box{
	display: flex;
}
</style>
